<template>
    <!-- 各省会城市餐厅入驻数量 -->
    <div class="city-inject">
        <province-title title="各省会城市餐厅入驻数量"></province-title>
        <div class="inject-content bj-flex-center">
            <div class="city-echart" ref="cityId"></div>
        </div>
        
    </div>
</template>

<script>
import provinceTitle from "@/components/provinceTitle.vue";
export default {
    components:{
        provinceTitle
    },
    props:{
        
    },
    data () {
        return {
            myChart:null,
            timeOut:null,
        }
    },
     mounted () {
        this.initChart();
    },
    methods: {
        initChart(){
            // 初始化 echarts 实例
            this.myChart = this.$echarts.init(this.$refs.cityId);
             // 指定图表的配置项和数据
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [
                        {
                            name: '餐厅数量'
                        },
                    ],
                    left: "89%",
                    top:"4%",
                    textStyle: {
                        color: "#A1D5FF",
                        fontSize: 12
                    }, 
                    type:'plain',
                    icon:'rect',
                    itemWidth: 12,  // 设置宽度
                    itemHeight: 12,
                    itemGap: 12, // 设置间距

                },
                grid: {
                    top: '16%',
                    right: '2%',
                    left: '1%',
                    bottom: '6%',
                    containLabel: true,
                },
                xAxis: [{
                    type: 'category',
                    data: ['5-01','5-02','5-03','5-04','5-05','5-06','5-07','5-08','5-09','5-10','5-05','5-11','5-12','5-13','5-14','5-15','5-16','5-17','5-18','5-19','5-20'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#AACBDE',
                        textStyle: {
                            fontSize: 14
                        },
                    },
                }],
                yAxis: [{
                    axisLabel: {
                        formatter: '{value}',
                        color: '#AACBDE',
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    }
                }],
                dataZoom: [ //给x轴设置滚动条
                    {
                        start: 0, //默认为0
                        end: 100 - 1500 / 31, //默认为100
                        type: 'slider',
                        show: false,
                        xAxisIndex: [0],
                        showDataShadow: false, //是否显示数据阴影 默认auto
                        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                        filterMode: 'filter',
                    },
                     //下面这个属性是里面拖到
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 0, //默认为1
                        end: 100 - 1500 / 31, //默认为100
                    },
                ],
                series: [
                    {
                        name: '餐厅数量',
                        type: 'bar',
                        data: [211,212,253,633,514,10,263,52,321,621,98,85,258,658,181,258,78,77,321],
                        barWidth: '12px',
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(28, 153, 242, 1)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(28, 153, 242, 0.20)' // 100% 处的颜色
                                }], false),
                                barBorderRadius: [30, 30, 30, 30],
                                shadowBlur: 4,
                            }
                        },
                    }
                ]
            }
            // 使用配置项显示图表
            this.myChart.setOption(option);
            this.timeOut=null
            this.myChart.on('mouseover',this.stop());
            this.autoMove(option)
        },
        autoMove(option){
            this.timeOut = setInterval(() => {
                
                if (Number(option.dataZoom[0].end)  > 100) {
                    option.dataZoom[0].end = 20;
                    option.dataZoom[0].start = 0;
                } 
                else {
                    option.dataZoom[0].end = option.dataZoom[0].end + 1 *  (100 / option.series[0].data.length);
                    option.dataZoom[0].start = option.dataZoom[0].start + 1 *  (100 / option.series[0].data.length);
                }
                this.myChart.setOption(option);
            }, 3000);
        },
        stop(){
            clearInterval(this.timeOut)
        },
    }
};
</script>

<style lang="scss" class>
.city-inject{
    width: 928px;
    height: 272px;
    .inject-content{
        width: 100%;
        height: 230px;
        background: linear-gradient( 180deg, rgba(7,29,65,0.1) 0%, rgba(10,47,107,0.4) 100%);
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(34, 83, 135, 1), rgba(42, 112, 186, 1), rgba(34, 83, 135, 1), rgba(57, 128, 202, 1), rgba(34, 83, 135, 1)) 1 1;
    }
    .city-echart{
        width: 898px;
        height: 230px;
    }
}
</style>